<template>
	<view class="main flex flex-wrap-w">
		<view v-for="(item, index) in info.list" :key="index" class="list" @click="onChange(item)">
			<text :class="[item.provice == provice?'active':'']" class="description desc-1">{{ item.provice }}</text>
		</view>
	</view>
</template>

<script setup lang="ts">
import { reactive, computed } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import { useStore } from 'vuex';
import common from '@/api/common.js';
const store = useStore();
const provice = computed(() => store.state.provice);
interface Props {
	isMore: boolean;
}
const props = withDefaults(defineProps<Props>(), {
	isMore: false
});
const info = reactive({
	list: []
});
const emit = defineEmits(['click']);
const cityList = async () => {
	const res = await common.getArea();
	if (props.isMore) {
		res.data.push({
			provice: '更多'
		});
	}

	info.list = res.data;
};
const onChange = (v: AnyObject) => {
	emit('click', v);
};
onLoad(() => {
	cityList();
});
</script>

<style lang="scss" scoped>
.main {
	background: #fff;
	padding-top: 30rpx;
	.list {
		width: 150rpx;
		height: 70rpx;
		line-height: 70rpx;
		// padding: 23rpx 44rpx;
		background: #f8f8f8;
		font-size: 28rpx;
		color: #000000;
		margin-bottom: 30rpx;
		margin-left: 30rpx;
		text-align: center;
	}
	.active {
		color: #009943;
	}
}
</style>
